<template>
  <button @click="toggle">显示隐藏图片</button>
  <img v-show="show" alt="Vue logo" src="../assets/vue.svg" />
  <hr />
  计数器：{{ count }} <button @click="increment">累加</button>
</template>

<script>
// vue3中要定义模型数据要使用ref，这样它才有响应式效果
import { ref } from 'vue'
export default {
  // 组合式api的入口函数
  // 该函数中就定义好模型data、methods、computed、watch、...
  setup () {
    const count = ref(100) // 初始值是100
    const increment = () => {
      // 因为我们使用ref定义的模型数据它内部进行包裹，在js代码中要取到它的值，需要通过 xxx.value 才能获取
      count.value += 2
    }

    const show = ref(true) // 初始值是true
    const toggle = () => {
      console.log('---ref show---', show)
      show.value = !show.value
    }

    // 注意点：初学者往往忘记了在这里把它返回
    // 视图中用到的必须在这里返回
    return {
      count,
      show,
      toggle,
      increment
    }
  }
}
</script>
